import React, { Component } from 'react'

export default class TodoFooter extends Component {
  render() {
    const { list, type } = this.props
    // console.log(list.length)
    if (list.length === 0) {
      return null
    }
    const ifshow = list.some((item) => item.checked === true)
    return (
      <footer className="footer">
        <span className="todo-count">
          <strong>
            {
              list.filter((item) => {
                return item.checked === false
              }).length
            }
          </strong>{' '}
          item left
        </span>
        <ul className="filters">
          <li>
            {
              //{type === all ? "selected" : ''}
            }
            <a
              className={type === 'all' ? 'selected' : ''}
              href="#/"
              onClick={() => this.handdleClick('all')}
            >
              All
            </a>
          </li>
          <li>
            <a
              className={type === 'active' ? 'selected' : ''}
              href="#/active"
              onClick={() => this.handdleClick('active')}
            >
              Active
            </a>
          </li>
          <li>
            <a
              className={type === 'completed' ? 'selected' : ''}
              href="#/completed"
              onClick={() => this.handdleClick('completed')}
            >
              Completed
            </a>
          </li>
        </ul>
        {ifshow && (
          <button className="clear-completed" onClick={this.clearCompleted}>
            Clear completed
          </button>
        )}
      </footer>
    )
  }
  clearCompleted = () => {
    this.props.clearCompleted()
  }

  handdleClick = (type) => {
    this.props.changeType(type)
  }
}
